<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/style.css">
    <title>Drink Water</title>
</head>
<body>
    <h1>喝水记录</h1>
    <h3>目标：2L</h3>
    <div class="cup">
        <div class="remained" id="remained">
            <span class="liters"></span>
            <small>剩余</small>
        </div>
        <div class="percentage" id="percentage"></div>
    </div>
    <p class="text">选择你喝了多少杯水</p>
    <div class="cups">
        <div class="cup cup-small" data-index=0>250ml</div>
        <div class="cup cup-small" data-index=1>250ml</div>
        <div class="cup cup-small" data-index=2>250ml</div>
        <div class="cup cup-small" data-index=3>250ml</div>
        <div class="cup cup-small" data-index=4>250ml</div>
        <div class="cup cup-small" data-index=5>250ml</div>
        <div class="cup cup-small" data-index=6>250ml</div>
        <div class="cup cup-small" data-index=7>250ml</div>
    </div>
    <script>
        const remained = document.querySelector('.remained');
        const liters = document.querySelector('.liters')
        const percentage = document.getElementById('percentage')
        const cups = document.querySelector('.cups')
        cups.addEventListener('click', e=>{
            if(e.target.classList.contains('cup-small')){
                const index = e.target.getAttribute('data-index')
                heightCups(Number(index))
            }
            
        })
        function heightCups(idx){
            const smallCups = cups.children;
            // console.log(smallCups)
            // if(idx === 7 && smallCups[idx].classList.contains('full')){
            //     idx--;
            // }else if(smallCups[idx].classList.contains('full') && !smallCups[idx+1]?.classList.contains('full')){
            //     idx--
            // }
            if(smallCups[idx].classList.contains('full') && !smallCups[idx+1]?.classList.contains('full')){
                idx--;
            }

            [...smallCups].forEach((item,index)=>{
                if(index <= idx){
                    item.classList.add('full')
                }else{
                    item.classList.remove('full')
                }
            })
            updateCups(idx);
        }
        function updateCups(idx){
            const fillCups = idx + 1
            const totalCups = cups.children.length
            if(fillCups>0){
                percentage.style.height=`${fillCups/totalCups*260}px`
                percentage.textContent = `${fillCups/totalCups*100}%`
            }else {
                percentage.style.height = '0px'
            }
            if(fillCups === totalCups){
                remained.style.height = '0px'
            }else {
                liters.textContent = `${2-(fillCups/totalCups)*2}L`
            }
        }
        updateCups(-1)
    </script>
</body>
</html>